<template>
    <div>
      <!-- 使用按钮组选择时间范围 -->
      <el-button-group style="margin-bottom: 20px;">
        <el-button @click="setRange(7)">最近7天</el-button>
        <el-button @click="setRange(15)">最近15天</el-button>
        <el-button @click="setRange(30)">最近30天</el-button>
      </el-button-group>
  
      <!-- ECharts 容器 -->
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted,defineProps } from 'vue';
  import * as echarts from 'echarts';
  import axios from 'axios';
  import { ElMessage } from 'element-plus';
  
  const props = defineProps({
    reqUrl: {
      type: String,
      required: true,
    },
  })
  
  // 定义 LikeData 类型
  interface LikeData {
    dates: string[];
    likes: number[];
  }
  
  // 定义 chart 和 chartRef
  const chart = ref<echarts.ECharts | null>(null);
  const chartRef = ref<HTMLDivElement | null>(null);
  
  // 初始化 ECharts 图表
  const initChart = (likeData: LikeData): void => {
    if (!chartRef.value) return;
  
    chart.value = echarts.init(chartRef.value);
  
    const option: echarts.EChartsOption = {
    //   title: {
    //     text: '每日点赞量',
    //   },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: likeData.dates, // X轴，点赞日期
      },
      yAxis: {
        type: 'value',
        name: '点赞量',
      },
      series: [
        {
          data: likeData.likes, // Y轴，点赞量数据
          type: 'line',
          smooth: true, // 平滑的曲线
          name: '点赞量',
          lineStyle: {
            width: 2,
          },
        },
      ],
    };
  
    chart.value.setOption(option);
  };
  
  // 获取点赞数据
  const fetchLikesData = async (startDate: string, endDate: string): Promise<LikeData> => {
    try {
      const response = await axios.get(`${props.reqUrl}`, {
        params: { startDate, endDate },
      });
      console.log(response);
      
      if (response.data.code === 200) {
        const rawData = response.data.data;
        const dates = Object.keys(rawData); // 获取日期数组
        const likes = Object.values(rawData); // 获取对应的点赞量数组
        return { dates, likes } as LikeData;
      } else {
        ElMessage.error('请求失败');
        return { dates: [], likes: [] };
      }
    } catch (error) {
      console.error('请求失败:', error);
      ElMessage.error('获取数据失败');
      return { dates: [], likes: [] };
    }
  };
  
  // 处理按钮点击事件
  const setRange = async (days: number) => {
    const today = new Date();
    const startDate = new Date();
    if (days > 0) {
      startDate.setDate(today.getDate() - days);
    } else {
      startDate.setHours(0, 0, 0, 0); // 今天的时间范围
    }
  
    const formattedStartDate = startDate.toISOString().slice(0, 10);
    const formattedEndDate = today.toISOString().slice(0, 10);
  
    const likeData = await fetchLikesData(formattedStartDate, formattedEndDate);
    initChart(likeData);
  };
  
  // 初始挂载时加载最近7天的数据
  onMounted(async () => {
    setRange(7); // 默认加载最近7天的数据
  });
  </script>
  
  <style scoped>
  /* 样式可根据需要调整 */
  </style>
  